<template>
  <section>
    <h4 class="divider">基础信息</h4>
    <el-form :model="formInline" class="form-base" label-width="120px">
      <el-form-item label="数据源" :rules="[{ required: true }]">
        <el-select v-model="formInline.srcId" placeholder="请选择">
          <el-option
            :label="item.srcName"
            :value="item.id"
            :key="index"
            v-for="(item, index) in srcOptions"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="SQL" :rules="[{ required: true }]">
        <el-input
          v-model="formInline.sqlStmt"
          placeholder="请输入"
          type="textarea"
          id="code"
          name="code"
          style="border: solid 1px #eee"
        ></el-input>
      </el-form-item>
      <p class="sql-tip">
        数据量限制：需要写成分页模式，数据获取语句（SELECT，存储过程），单次获取不得超过1000条。
      </p>
    </el-form>
    <h4 class="divider">请求参数 <el-button type="primary" plain size="small" @click="paramsWriteBack" class="write"> 入参填入</el-button></h4>
    <table class="pure-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>参数</th>
          <th>模式</th>
          <th>类型</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in formInline.inParamsJson" :key="index">
          <td>{{ index + 1 }}</td>
          <td>
            <el-input v-model="item.value" placeholder="请输入参数"></el-input>
          </td>
          <td>
            <el-select v-model="item.mode" placeholder="请选择模式">
              <el-option label="OUT" value="OUT"> </el-option>
              <el-option label="IN" value="IN"> </el-option>
              <el-option label="INOUT" value="INOUT"> </el-option>
            </el-select>
          </td>
          <td>
            <el-select v-model="item.type" placeholder="请选择数据类型">
              <el-option :label="item" :value="item" v-for="(item,index) in sqlParamType" :key="index" > </el-option>
            </el-select>
          </td>
          <td><span class="del" @click="delRow(index)">删除</span></td>
        </tr>
        <tr>
          <td colspan="4">
            <el-button type="primary" @click="addRequestRow"
              >+增加参数</el-button
            >
          </td>
        </tr>
      </tbody>
    </table>
  </section>
</template>

<script>
import { reactive, ref, onMounted, defineComponent, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { filtersArrey,sqlParamType } from "@/utils/index.js";
import CodeMirror from "codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/mode/sql/sql";

export default defineComponent({
  components: {},
  setup() {
    const route = useRoute();
    const store = useStore();
    const formInline = ref({
      srcId: "",
      sqlStmt: "",
      inParamsJson: [],
    });
    watch(
      () => formInline.value,
      (newData, oldData) => {
        // console.log(newData);
        store.commit("app/PUT_SERVICE_DB", newData);
        // console.log("state：", store.state.app.serviceBody);
        // ctx.emit("callRequest", requestData.value);
      },
      { deep: true }
    );
    const addRequestRow = () => {
      formInline.value.inParamsJson.push({ value: "" });
    };
    const delRow = (index) => {
      formInline.value.inParamsJson.splice(index, 1);
    };
    const onSubmit = () => {
      console.log("submit!");
    };
    const editSQLMode = () => {
      let myTextarea = document.getElementById("code");
      var editor = CodeMirror.fromTextArea(myTextarea, {
        mode: "text/x-mysql",
        lineNumbers: true, //显示行数
        matchBrackets: true, // 括号匹配（这个需要导入codemirror的matchbrackets.js文件）
      });
      // console.log(formInline.value.sqlStmt);
      editor.setValue(formInline.value.sqlStmt);
      editor.on("change", function (obj) {
        // console.log(obj.getValue());
        formInline.value.sqlStmt = obj.getValue();
      });
    };
    const srcOptions = ref([]);
    let editMode = route.name == "EditService";
    //  上页请求参数回写
    function paramsWriteBack() {
      const optionList = store.state.app.serviceBody.inParamsList || [];
      formInline.value.inParamsJson = optionList.map((item) => {
        return {
          value: "${" + item.paramName + "}",
          mode: "IN",
          type: "STRING",
        };
      });
    }

    onMounted(() => {
      srcOptions.value = filtersArrey(
        store.state.app.scrOpitonList,
        "srcType",
        "DB"
      );
      if (editMode) {
        // console.log(store.state.app.serviceBody.ifParam);
        formInline.value = store.state.app.serviceBody.ifParam.adptIfCfgDb || {
          srcId: "",
          sqlStmt: "",
          inParamsJson: [],
        };
        editSQLMode();
      }
    });
    return {
      formInline,
      onSubmit,
      srcOptions,
      addRequestRow,
      delRow,
      paramsWriteBack,
      sqlParamType
    };
  },
});
</script>

<style lang="scss" scoped>
.sql-tip {
  color: red;
  text-indent: 8.5em;
}
</style>
